<template>
  <div class="center my-4 font-bold text-16px color-[#333]">
    <div class="mr-1">{{ formatDate(model.date) }}</div>
    执行度：
    <wd-count-to
      v-if="compNumber"
      :endVal="compNumber"
      suffix="%"
      type="primary"
    />
    <template v-else>{{ isNaN(compNumber) ? '请假' : '暂未打卡' }}</template>
  </div>

  <wd-form ref="form" custom-class="p-2" :model="model" errorType="toast">
    <wd-cell-group border>
      <wd-calendar
        v-if="showCalendar"
        v-model="model.date"
        label="打卡日期"
        label-width="100px"
        placeholder="请选择日期"
        prop="date"
        :min-date="startDate"
        :max-date="endDate"
        :show-confirm="false"
        :rules="[{ required: true, message: '请选择日期' }]"
        :formatter="formatter"
        @change="handleCalendarChange"
      />
      <wd-input
        v-model="model.value"
        label="执行度(%)"
        label-width="100px"
        prop="value"
        type="number"
        :focus="true"
        placeholder="请输入执行度0-100"
        :rules="[{ required: true, message: '请填写执行度' }]"
      />
      <wd-radio-group
        v-model="number"
        cell
        shape="button"
        @change="handleRadioChange"
      >
        <wd-radio
          v-for="radio in radioList"
          :key="radio.value"
          :value="radio.value"
        >
          {{ radio.label }}
        </wd-radio>
      </wd-radio-group>
    </wd-cell-group>
    <view class="footer mt-4">
      <wd-button
        type="primary"
        size="large"
        :loading="loading"
        block
        @click="handleSubmit"
      >
        提交
      </wd-button>
    </view>
  </wd-form>
  <div class="center mt-4">
    <wd-button type="text" @click="jump('/pages/dailyCheck/log/index')">
      查看本周浇水
    </wd-button>
  </div>
  <wd-toast />
  <wd-message-box />
  <Subscribe />
</template>

<script setup lang="ts">
import { jump } from '@/utils/common';
import { formatDate } from '@/utils/date';
import Subscribe from '@/components/Subscribe/index.vue';
import { useDailyCheck } from '@/composables';

const {
  loading,
  number,
  form,
  radioList,
  startDate,
  endDate,
  model,
  compNumber,
  showCalendar,
  formatter,
  handleRadioChange,
  handleCalendarChange,
  handleSubmit
} = useDailyCheck();

onShareAppMessage(() => ({
  title: '快来浇水吧！',
  path: '/pages/dailyCheck/index'
}));
</script>

<style lang="scss" scoped></style>
